<template>
	<div>
		<el-dialog :visible.sync="dialogVisible" :show-close="false">
			<div slot="title"
				style="border-bottom: 1px solid #cbcbcb;display: flex;align-items: center;justify-content: space-between;padding-bottom: 15px;">
				<div style="font-size: 18px;color: #333;">我要评论</div>
				<i class="el-icon-close" style="cursor: pointer;" @click="close()"></i>
			</div>

			<div>
				<el-form ref="form" :model="form" :rules="rules">
					<el-row>
						<el-col :xs="24" :sm="{span:22,offset:1}" :md="{span:22,offset:1}" :lg="{span:22,offset:1}" :xl="{span:22,offset:1}">
							<el-form-item label="评论内容" prop="commentContent">
								<el-input v-model="form.commentContent" type="textarea" placeholder="请输入评论内容"
									maxlength="500" show-word-limit rows="5"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>

			<div slot="footer" v-loading="loading" style="display: flex;justify-content: center;cursor: pointer;">
				<img style="width: 138px;height: 44px;object-fit:cover;" src="@/assets/images/industryNews29.png"  @click="submit()">
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		industryNewCommentAdd
	} from "@/request/api/industryNew";
	export default {
		data() {
			return {
				dialogVisible: false,
				loading:false,
				form: {
					commentContent: "",
				},

				rules: {
					commentContent: [{
						required: true,
						message: '请输入评论内容',
						trigger: 'blur'
					}]
				}
			};
		},
		methods: {
			open(id) {
				this.ids = id
				this.dialogVisible = true
			},
			// 关闭
			close() {
				this.$refs.form.resetFields();
				this.dialogVisible = false
			},
			// 提交
			submit() {
				if(this.form.commentContent.indexOf('http')!=-1){
					this.$message({
						message: '请勿输入有链接的评论',
						type: "warning",
					});
					return
				}
				
				this.$refs.form.validate((valid) => {
					if (valid) {
						// alert('submit!');
						this.loading = true
						let data = {
							informationId: this.ids,
							commentContent: this.form.commentContent
						}
						
						industryNewCommentAdd(data).then((res) => {
							// console.log('res',res)
							if (res.data.code == 200) {
								this.$message({
									message: res.data.message,
									type: "success",
								});
								setTimeout(() => {
									this.$refs.form.resetFields();
									this.dialogVisible = false
									this.$emit('reloadData')
									this.loading = false
								}, 1000)
							} else {
								this.loading = false
								this.$message({
									message: res.data.message,
									type: "warning",
								});
							}
						}).catch((err) => {
							console.log('err', err)
							this.loading = false
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		/deep/.el-dialog{
			width: 95%;
		}
	}
	.form-label {
		margin-top: 10px;
		text-align: right;
		padding-right: 15px;
	}
	/deep/.el-dialog__body{
		padding: 0;
	}
</style>